import React, { Component } from 'react';
import { Link,Route } from 'react-router-dom';
import axios from '../api/index';
import imgUrl from '../style/imgs/login_logo.png';
import '../style/less/login.css';
import 'antd/dist/antd.css';

import { Form, Icon, Input, Button, Checkbox,message } from 'antd';

const FormItem = Form.Item;



class NormalLoginForms extends React.Component {
  handleSubmit = (e) => {
    var that = this;
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
           
            this.props.name.history.push('/home')
            message.info('success');
            console.log('Received values of form: ', values);
          }
        });
      }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <Form onSubmit={this.handleSubmit} className="login-form">
            <FormItem>
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' }],
              })(
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Checkbox>Remember me</Checkbox>
              )}
             
              <a href="">忘记密码</a>
            </FormItem>
            <FormItem>
            <Button block type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </FormItem>
          </Form>
        )
    }
  
}
class Head extends React.Component{
    render(){
        return(
            <img src={imgUrl}/>
        )
    }
}
class Main extends React.Component{
    render(){
        return(
            <div className='main'></div>
        )
    }
}
class Footer extends React.Component{
    render(){
        return(
             <div></div>
        )
    }
}
class Login extends React.Component {
   render(props) {
    const NormalLoginForm = Form.create()(NormalLoginForms);
      return (
        <div>
        <Head />
        <Main />
        <Footer />
        <NormalLoginForm name={this.props}/>
        </div>
      );
   }
}
 
export default Login;
